<template lang="html">
  <div class="shopcart-wrapper" >
    <div class="carbox" @click="isShow=!isShow">
      <div class="cartlogo" :class="{animated:bouceInFlag, bounce:bouceInFlag}">
          <div class="out" >
             <span class="total" v-if="totalCount">{{totalCount}}</span>
              <div class="in " :class="{act:totalPrice}">
                  <i class="icon iconfont icon-gouwuche"></i>
              </div>
          </div>
      </div>
      <div class="price-box">
          <span class="price">￥{{totalPrice}}</span>
          <span class="fee">配送费￥0元</span>
      </div>
      <div class="topay" :class="{act:totalPrice}">
        去结算
      </div>

      <transition @before-enter="beforeEenter"
         @enter="enter" @after-enter="afterEnter"
           v-for="(ball,index) in balls" :key="index">
    <div class="ball-container" v-show="ball.show">
       <div class="in">

       </div>
    </div>
    </transition>

   </div>

      <transition  name="slide">
      <div class="cart-list" v-show="isShow&&selectedFoods.length>0">
         <div class="art-list-header">
            <span class="car">购物车</span>
            <span class="clear"> <i class="icon iconfont icon-youhui"></i>清除</span>
         </div>
         <ul>
            <li class="food-list" v-for="food in selectedFoods">
                <span>{{food.name}}</span>
                <span class="price">${{food.price}}</span>
                <span class="carbutton-box">
                    <cartbutton :food="food"></cartbutton>
                </span>
            </li>
         </ul>
      </div>
      </transition>
   </div>
</template>

<script>
import  cartbutton from '@/components/cartbutton';
export default {
  methods:{
    beforeEenter(el){
      let count=this.balls.length;
      while(count--){
        let ball=this.balls[count];
        if(ball.show){
          let rect=ball.target.getBoundingClientRect();
          let left=rect.left-35;
          let top=-(window.innerHeight-rect.top-50);
          el.style.transform=`translate3d(0,${top}px,0)`;
          el.style.webkitTransform=`translate3d(0,${top}px,0)`;
          let inner=el.getElementsByClassName("in")[0];
          inner.style.transform=`translate3d(${left}px,0,0)`;
          inner.style.webkitTransform=`translate3d(${left}px,0,0)`;
        }
      }
    },
enter(el,done){
  let rest=  el.offsetHeight; //触发浏览器重构
  this.$nextTick(()=>{
    el.style.transform='translate3d(0,0,0)';
    el.style.webkitTransform='translate3d(0,0,0)';
    let inner=el.getElementsByClassName("in")[0];
    inner.style.transform='translate3d(0,0,0)';
    inner.style.webkitTransform='translate3d(0,0,0)';
    el.addEventListener('transitionend',done);
  })
    },

  afterEnter(el){
    let ball=this.dropBalls.shift();
    if(ball.show){
      ball.show=false;
      el.style.display="none";
      this.bouceInFlag=true;
      let self=this;
      setTimeout(()=>{
         self.bouceInFlag=false;
      },1000);
    }
    },

    ballClick(target){
      for(let i=0;i<this.balls.length;i++){
        let ball=this.balls[i];
         if(!ball.show){
            ball.show=true;
            ball.target=target;
            this.dropBalls.push(ball);
            return;
         }
      }
    }
  },
  data(){
    return{
      bouceInFlag:false,
      dropBalls:[],
      balls:[
        {show:false},
          {show:false},
            {show:false},
              {show:false},
                {show:false},
                  {show:false},
                    {show:false},
                      {show:false},
                        {show:false}
      ],
       isShow:false
    }
  },
  components:{
    cartbutton
  },
  props:{
    selectedFoods:{
      type:Array,
      default(){
        return[
          {count:1,price:10},
          {count:6,price:20}
      ]
      }
    }
  },
  computed:{
    totalCount(){
      let total=0;
      this.selectedFoods.forEach(food =>{
        total+=food.count;
      })
      return total;
    },
    totalPrice(){
      let total=0;
      this.selectedFoods.forEach(food =>{
        total+=food.count*food.price;
      })
      return total;
    },
  }
}
</script>

<style lang="less">
@import '../../static/less/var.less';
@import '../../static/less/animate.css';
.ball-container{
  position: absolute;
  left:35px;
  top:0;
  z-index: 200;
  transition: 0.75s cubic-bezier(0.2,-0.37,0.86,0.34);
   .in{
     width: @base*30rem;
     height:@base*30rem;
     border-radius: 50%;
     background:#0391E6;
     transition: 0.75s;
   }
}
.shopcart-wrapper{
   .carbox{
     width: 100%;
     position: fixed;
     bottom: 0;
     left:0;
      height:@base*96rem;
      background: #434341;
      display: flex;;
      justify-content: space-between;
      z-index: 100;
   .cartlogo{
      width: @base*160rem;
      position: relative;
      z-index: 10;
      .out{
        width:@base*80rem;
        height: @base*80rem;
        background:#434341;
        border-radius: 50%;
        padding:@base*10rem;
        margin-top: @base*-22rem;
        margin-left: @base*32rem;
        position: relative;
        .total{
          padding: 1px 8px;
          border-radius: 40px;
          position: absolute;
          padding: @base*10rem;
          background: #FF20FF;
          font-size: @base*6rem;
          top:@base*-10rem;
          left:@base*70rem;
        }
        .in{
          width:@base*80rem;
          height: @base*80rem;
          background:#323232;
          border-radius: 50%;
          text-align: center;
          line-height: @base*80rem;
          i{
            color:#fff;
            font-size: @base*50rem;
          }
          &.act{
            background:red;
            i{
              color:#fff;
            }
          }
        }
      }
   }

   .price-box{
     margin-left: @base*-150rem;
     text-align: center;
     line-height: @base*96rem;
     color:#fff;
     position: relative;
     z-index: 10;
     .fee{
       font-size: @base*25rem;
     }
   }

   .topay{
     width: @base*180rem;
      line-height: @base*96rem;
      text-align: center;
      color:#fff;
      background: #747278;
        position: relative;
        z-index: 10;
      &.act{
        background: red;
        color:#fff;
      }
   }
  }
   .cart-list{
     max-height: @base*650rem;
     width: 100%;
     position: absolute;
     bottom: @base*96rem;
     background: #fff;
     overflow: auto;
     z-index: 10;
     .art-list-header{
       height: @base*81rem;
       background:#F4F3F4;
       padding: @base*5rem @base*20rem;
       line-height: @base*81rem;
      .car{
         padding-left: @base*10rem;
           color: red;
           font-weight: bold;
         float:left;
      }
      .clear{
        color: #8C93A2;
        float: right;
      }
     }
     .food-list{
       height: @base*80rem;
       line-height: @base*80rem;
       padding: @base*15rem @base*25rem;
       border-bottom: 1px solid #333;
       display: flex;
       justify-content: space-between;
       .carbutton-box{
          width: @base*155rem;

       }
     }
   }
}
.slide-enter-active,.slide-leave-active{
  transition: 0.5s;
}
.slide-enter{
  transform: translateY(100%);
  opacity: 0;
}
.slide-leave{
  transform: translateY(100%);
  opacity: 0;
}
</style>
